<template>
  <div class="position-manage" v-loading="positions.loading">
    <el-table
      :data="positions.rows"
      style="width: 100%">
      <el-table-column
        prop="index"
        label="序号"
        align="center"
        type="index"
        width="60">
      </el-table-column>

      <el-table-column
        prop="positionName"
        label="职位名称">
      </el-table-column>

      <el-table-column
        label="发布状态"
        width="80">
        <template slot-scope="scope">
          {{scope.row.validityPeriod > new Date().getTime() ? '上线' : '下线'}}
        </template>
      </el-table-column>

      <el-table-column
        label="开启状态"
        width="80">
        <template slot-scope="scope">
          {{scope.row.positionStatus === 'VALID' ? '开启' : '关闭'}}
        </template>
      </el-table-column>

      <el-table-column
        label="更新时间"
        width="120">
        <template slot-scope="scope">
          {{$formatYMD(scope.row.ctime)}}
        </template>
      </el-table-column>
      
      <el-table-column
        label="操作"
        width="300">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openItem(scope.row)">查看应聘人员</el-button>
          <el-button type="text" size="small" @click="seePosition(scope.row)">岗位详情</el-button>
          <el-button type="text" size="small" @click="updatePosition(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deletePosition(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="list-page">
      <el-pagination
        :current-page="positions.pageIndex"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="positions.pageSize"
        class="fr"
        layout="sizes, prev, pager, next"
        :total="positions.count">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="visible" width="900px" title="应聘者列表">
      <position-vitae ref="vitae"></position-vitae>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
  </div>
</template>
<script>
import PositionVitae from './PositionVitae'
import PagedList from '../../libs/PagedList.js'

export default {
  name: 'positionmanage',
  title: '职位管理',
  data() {
    return {
      positions: new PagedList('/mscs/position/findPositionByUserId', 20, {userId: this.$store.state.user.user.user.userId}),
      visible: false
    }
  },
  mounted () {
    this.positions.search()
  },
  methods: {
    seePosition (row) {
      const {href} = this.$router.resolve({
        name: 'recruitdetails',
        params: {id: this.$compileStr(row.positionId)}
      })
      window.open(href, '_blank')
    },
    updatePosition (row) {
      this.$router.push({name: 'publishrecruit', query: {id: row.positionId}})
    },
    deletePosition (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        axios.post('/mscs/position/delPositionById', this.$paramsConvert({positionId: row.positionId})).then(res => {
          if (res.data.code === 1) {
            this.$message({
              showClose: true,
              message: '成功删除职位信息',
              type: 'success'
            })
            this.positions.refresh()
          } else {
            this.$codeError(res)
          }
        }).catch(error => {
          this.$catchError(error)
        })
      })
    },
    addNew () {
      this.$router.push({name: 'publishrecruit'})
    },
    openItem (row, index) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.vitae.search(row.positionId)
      })
    }
  },
  watch: {
    '$store.state.user.token' (val) {
      if (val) {
        this.positions.search() 
      }
    }
  },
  components: {
    PositionVitae
  }
}
</script>
<style lang='scss'>
  .position-manage {
    .el-dialog {
      border-radius: 10px;
      .el-dialog__body {
        padding-top: 0;
        .el-table {
          margin-top: 10px;
        }
      }
    }
    .el-table {
      border-top: 1px solid #94C05A;
      margin-top: 30px;
      th {
        background-color: #E4EED8;
        color: #666666;
      }
      td {
        background-color: #F3F9EB;
      }
    }
  }
</style>